<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>CSS三大特性</title>
    <style>
      /*       
        层叠性
        1.样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
        2.样式不冲突，不会重叠
      */
      div {
        color: red;
        font-size: 12px;
      }
      div {
        color: blue;
      }
      /*
      继承性
      子标签会继承父标签的某些样式（ text-,font-,line- 这些样式开头的可以继承，以及color属性）
      恰当地使用继承可以简化代码，降低CSS样式的复杂性
      
      div {
        color: pink;
        font-size: 20px;
      }*/
      /*
      行高继承
      */
      body {
        color: pink;
        /*font: 12px/24 "Microsoft YaHei";*/
        font: 12px/1.5 "Microsoft YaHei";
      }
      div {
        /*
        子元素继承了父元素 body 的行高的 1.5倍
        这个 1.5 就是当前元素文字大小 font-size 的 1.5 倍，所以当前 div 的行高就是 14 * 1.5 = 21 像素

        */
        font-size: 14px;
      }
      p {
        /* 16 * 1.5 = 24 像素 */
        font-size: 16px;
      }

      /*
      优先级
      比较权重
      继承或者*（0,0,0,0） < 元素选择器（0,0,0,1） < 类选择器，伪类选择器 （0,0,1,0）
      < ID选择器 （0,1,0,0）< 行内样式 style = "" （1,0,0,0）< !important（无穷大）
      继承的权重为 0，如果该元素没有直接选中，不管父元素权重有多高，子元素得到的权重都是 0
      div {
        color: aqua;
      }*/
      .test {
        color: blue;
        /*color: blue !important; 优先级最高*/
      }
      #demo {
        color: red;
      }
      p {
        color: pink;
      }
      /* 
      a 链接浏览器默认制定了一个样式 蓝色的 有下划线*/
      /*
      权重的叠加
      不会发生进位现象
      */
    </style>
  </head>
  <body>
    <h4>层叠性</h4>
    <div>长江后浪推前浪，前浪死在沙滩上</div>
    <!-- <h4>继承性</h4>
    <div>
      <p>龙生龙，凤生凤，老鼠的儿子会打洞</p>
    </div>
    <div>粉红色的回忆</div>
    <p>绯红色的回忆</p> -->
    <!-- 优先级  -->
    <!-- <div class="test" id="demo" style="color: purple">
      你笑起来真好看
      <p>真的么</p>
    </div>
    <a href="#">我是孤独的</a> -->
  </body>
</html>
